<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步:引入依赖包 -->
    <script src="./echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width:50vw;
            height:50vh;
            margin: 50px auto;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <!-- 第二步:准备一个带有一定高度的容器 -->
    <div class="box"></div>
</body>

</html>
<script>
    //第三步:书写JS逻辑
    //echarts插件对外暴露一个echarts对象:身上有很多属性与方法
    //第一个参数:容器DOM节点
    let mycharts = echarts.init(document.querySelector('.box'));
    //第二步:准备图形图标的配置对象
    let options = {
        title: {
            text: '双坐标'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: [
            {
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: true
                }
            },
            {
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: true
                }
            }
        ],
        series: [
            { type: 'bar', data: [10, 20, 30, 40, 50, 60], yAxisIndex: 0 },
            { type: 'bar', data: [19, 55, 32, 77, 16, 99], yAxisIndex: 1 }
        ]
    };
    //第三步:
    mycharts.setOption(options);

    //图形图标绑定单机事件
    mycharts.on('click',(params)=>{
        mycharts.setOption({
            title:{
                text:params.data
            }
        })
    })

    //BOM监听浏览器窗口的变化
    window.addEventListener('resize',()=>{
        //自适应容器的变化
        mycharts.resize();
    })

</script>